<template>
  <div id="app">
    <div :class="{ 'dis-flex': isDev }">
      <div class="dev-left">
        <div
          v-for="rItem in arrRoute"
          :key="rItem.path"
          @click="$router.push(rItem.path)"
        >
          {{ rItem.meta.title }}
        </div>

        <p style="margin-top:200px">
          <a href="http://47.99.131.123/swagger/index.html">接口文档</a>
        </p>
      </div>
      <div class="dev-right">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { bus, busChat } from '@/main.js';
import arrRoute from '@/router/arrRouter.js';

export default {
  name: 'App',
  components: {},
  data() {
    return {
      pe: process.env,
      isDev: process.env.NODE_ENV === 'development',
      arrRoute: arrRoute,
    };
  },
  computed: {
    ...mapState(),
  },
  methods: {
    test: function() {
      console.log('test');
    },
    handleMessage: function(event) {},
  },
  beforeCreate: function() {}, // 实例初始化之后，数据观测和事件绑定之前
  created: function() {}, // 实例初始化完成，挂载尚未开始时
  beforeMount: function() {}, // 挂载之前，rander函数首次被调用时，常用于加载身份数据和一些后台可配置的选项
  mounted: function() {
    // window.parent.postMessage({ request: 'getUserId' }, '*'); //尝试向父级请求一些参数
    this.$store.dispatch('fetchEditableOptions');

    bus.$on('token_error_2', () => {
      alert('token_error_2');
      this.$router.push('/login');
    });
  }, //在实例挂载到DOM节点上之后
  beforeUpdate: function() {}, // 数据更新时，在虚拟DOM状态变化之前
  updated: function() {}, // 虚拟DOM被重新渲染之后
  beforeDestroy: function() {
    // window.removeEventListener('message', this.handleMessage, false);
  }, // 实例销毁之前，此时实例依然可用
  destroyed: function() {}, // 实例销毁后，此时实例及其子实例将完全解绑
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

.dev-left {
  min-width: 200px;
}
.dev-right {
  max-width: 750px;
  width: 414px;
}
</style>
